본문 바로가기
사이트 & 반응형 사이트 사이트 & 반응형 사이트 드디어 왔습니다. 사이트 완성형 + 반응형 입니다. 01. HTML 저의 🐶고생 끝에 완성되었습니다. 👻 HTML 코드 보기 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 Jelly Fish 슬라이드 영역 이미지 영역 이미지 텍스트 영역 카드 영역 배너 영역 텍스트 영역 푸터 영역 로그인 슬라이드 영역 Under the Sea Jelly fish 심해 그 저편에는 말랑한 해파리들이 가득 있습니다! 우리 같이 여러 모습들을 구경해보아요. 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 해파리들이 둥둥 떠다니는 모습 정해진 갈 길 없.. 2022. 9. 12.
슬라이드 유형 01 슬라이드 유형 01 버튼을 눌렀을 때 슬라이드가 가능한 유형을 제작해보았습니다. 01. figma 간편하게 디자인 하기 위해 피그마로 디자인 해보았습니다. 02. HTML HTML 입니다. 슬라이드 유형은 사용할 svg 와, 이미지와 글씨가 있습니다. 슬라이드 영역 DEVELOPER CAT PROJECT 고양이들이 가득 있어요 구경해주세요! 여러 종과 여러 색상이 있답니다. 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 03. css 글자색이라던가, 크기만 조정해주면 푸터 타입은 완성입니다. .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider__img { background: url(../.... 2022. 9. 5.
배너 유형 01 배너 유형 01 01. figma 간편하게 디자인 하기 위해 피그마로 디자인 해보았습니다. 02. HTML HTML 입니다. 배너 타입은 그저 이미지 위에 글씨만 올리는 타입이라 html도 간단합니다. 배너 영역 고양이 사이트 세상에서 귀여운 고양이들을 알리기 위해 만든 사이트 입니다. 다들 고양이 자랑과 이미지 보고 가세요. 배너 유형 01 03. css 글자색이라던가, 크기만 조정해주면 배너타입은 완성입니다. .banner__inner { background-image: url(../../../bannerType/img/banner_bg01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; t.. 2022. 9. 5.
푸터 유형 01 푸터 유형 01 01. figma 간편하게 디자인 하기 위해 피그마로 디자인 해보았습니다. 02. HTML HTML 입니다. 푸터 타입은 정말 간단하게 텍스트만 있어 글씨만 나눠주면 됩니다. 푸터 영역 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형01 메뉴 유형02 슬라이드 영역 슬라이드 유형01 슬라이드 유형02 이미지 영역 이미지 유형01 이미지 유형02 이미지/텍스트 유형01 이미지/텍스트 유형02 텍스트 유형01 컨텍츠 영역 카드 유형01 카드 유형02 카드 유형03 푸터 영역 푸터 메뉴 유형01 푸터 컨택트 유형02 푸터 이메일 유형03 2022 Manyong. Portfolio is Power All rights reserved. 03. css 글자.. 2022. 9. 5.
헤더 사이트 헤더 사이트 헤더 유형의 웹사이트를 디자인 해보았습니다. 01. figma 간편하게 디자인 하기 위해 피그마로 디자인 해보았습니다. 02. HTML HTML 입니다. css에서 작업을 display : flex 으로 작업을 할 예정이기 때문에 구조를 잘 잡아야 합니다. CAT site 헤더 영역 슬라이드 영역 배너 영역 콘텐츠 영역 푸터 영역 로그인 03. css 공통된 요소가 있으므로 그것을 제외한 뒤 작성하였습니다. .header__inner { width: 100%; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-sizing: border-box; border-b.. 2022. 9. 1.
텍스트 / 이미지 사이트 텍스트 / 이미지 사이트 텍스트와 이미지 사이트 유형의 웹 사이트를 디자인 해보았습니다. 01. figma 간편하게 디자인 하기 위해 피그마로 디자인 해보았습니다. 02. HTML HTML 입니다. css에서 작업을 display : flex 으로 작업을 할 예정이기 때문에 구조를 잘 잡아야 합니다. 깜찍발랄 고양이는 알아보기 이미지 텍스트 유형 01 멋있는 고양이 알아보기 고양이 집사, 예비 집사, 인터넷 집사를 위한 사이트 입니다. 털매끈 사이트 발바닥 사이트 귀쫑긋 사이트 낮잠 사이트 맹수 사이트 깜찍한 사이트 귀 쫑긋 사이트 맹수 사이트 03. css 공통된 요소가 있으므로 그것을 제외한 뒤 작성하였습니다. .imgText__inner { display: flex; justify-content: .. 2022. 9. 1.
텍스트 사이트 03 텍스트 사이트 03 텍스트와 아이콘을 활용하여 웹 사이트를 디자인 해보았습니다. 01. figma 간편하게 디자인 하기 위해 피그마로 디자인 해보았습니다. 이때, 스프라이트로 아이콘을 작업해줄꺼기 때문에 이미지 스프라이트로 준비하였습니다. 02. HTML HTML 입니다. css에서 작업을 display : flex 으로 작업을 할 예정이기 때문에 구조를 잘 잡아야 합니다. 스터디 후기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자 멤버를 소개합니다. 불과 3달전만해도 여러 원인들로 인해 자존감이 및바닥이였던 저에게 이 스터디는 너무 소중한 시간이었어요. 매일 마음속으로 울고싶다를 외치던 저였는데 이제는 조금이나마 이겨 낼 수 있을 것 같네요. 다음에 선생님 만났을 때는 많이 발전해 있는 제가 되었으면 좋.. 2022. 8. 31.
텍스트 사이트 02 텍스트 사이트 02 텍스트와 아이콘을 활용하여 웹 사이트를 디자인 해보았습니다. 01. figma 간편하게 디자인 하기 위해 피그마로 디자인 해보았습니다. 이때, 스프라이트로 아이콘을 작업해줄꺼기 때문에 이미지 스프라이트로 준비하였습니다. 02. HTML HTML 입니다. css에서 작업을 display : flex 으로 작업을 할 예정이기 때문에 구조를 잘 잡아야 합니다. CUTE CAT 고양이가 깜찍하다고 그 이유를 한번씩 알아봅시다 이유를 알 수록 빠져들거에요. 귀가 쫑긋 거린다 쫑긋 거리는 귀는 만지면 만질 수록 짜증을 나타내지만 그래도 그게 너무 귀여워서 참을 수 없다 뒤집으면 팔랑거려요 발바닥이 말랑거린다 고양이의 발바닥은 마치 라이크 젤리이다. 그 젤리를 만져보았나요? 맬렁맬렁하지만 역시 바.. 2022. 8. 31.
텍스트 사이트 01 텍스트 사이트 01 텍스트와 아이콘을 활용하여 웹 사이트를 디자인 해보았습니다. 01. figma 간편하게 디자인 하기 위해 피그마로 디자인 해보았습니다. 이때, 스프라이트로 아이콘을 작업해줄꺼기 때문에 이미지 스프라이트로 준비하였습니다. 02. HTML HTML 입니다. css에서 작업을 display : flex 으로 작업을 할 예정이기 때문에 구조를 잘 잡아야 합니다. 텍스트 유형 01 고양이가 귀여운 이유들 털이 부드럽다 고양이는 아주 보드라운 털을 말랑거리는 살 위에 덮어져있다. 한번도 만져보지 못한 사람은 있어도 한번만 만지는 사람은 없다 더보기 귀가 쫑긋 거린다 쫑긋 거리는 귀는 만지면 만질 수록 짜증을 나타내지만 그래도 그게 너무 귀여워서 참을 수 없다 뒤집으면 팔랑거려요 더보기 햇빛을 즐.. 2022. 8. 31.
이미지 유형 03 Imge type 03 피그마에서 디자인 하여, zeplin을 참고해 만든 이미지 타입 사이트 입니다. 아래는 피그마를 이용해 먼저 디자인 하였습니다. 이후 코드로 작성하였습니다. HTML 이미지에 마우스를 올리면 반응을 할 수 있는 반응형 카드유형을 제작했습니다. 세상에서 가장 아름다운 건물 웹쓰가 선정한 죽기전에 가봐야 할 건축물 베스트5입니다. 전세계에서 가장 유명한 건축가가 제작한 건축물로써 한번은 꼭 가봐야 하는 곳입니다. 셰이크 로트폴라 모스크 세계에서 가장 유명한 건물입니다. 최고의 건출물이나 현재는 전쟁으로 인해서 많이 파괴되었지만. 아직도 살 수 있다고 말한... 링크 트위터 인스타 유트브 페이스 북 셰이크 로트폴라 모스크 세계에서 가장 유명한 건물입니다. 최고의 건출물이나 현재는 전쟁으.. 2022. 8. 21.
Imge type 02 Imge type 02 피그마에서 디자인 하여, zeplin을 참고해 만든 이미지 타입 사이트 입니다. 아래는 피그마를 이용해 먼저 디자인 하였습니다. 이후 코드로 작성하였습니다. HTML 카드들은 컨테이너를 부여해 display : flex 를 주기 쉽게 하였습니다. 해파리의 떠다니는 모습들 투명한 해파리들이 다채로운 바다상에서 깊게 유영하고 다니며 영롱한 색상을 드러내고 있어요 파란색 해파리 자세히 보기 보라색 해파리 자세히 보기 투명한 해파리 자세히 보기 CSS 공통 요소 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Goth.. 2022. 8. 17.
Imge type 01 Imge type 01 피그마에서 디자인 하여, zeplin을 참고해 만든 이미지 타입 사이트 입니다. 아래는 피그마를 이용해 먼저 디자인 하였습니다. 이후 코드로 작성하였습니다. HTML 카드들은 컨테이너를 부여해 display : flex 를 주기 쉽게 하였습니다. 고양이는 왜이리 귀여운가? 고양이는 보들보들 가슴털과 말랑말랑 발바닥을 가지고 있기 때문이죠. 고양이 보들 가슴털 고양이 보들보들 가슴털을 볼때마다 만지고 싶은데 만지면 도망가거나 물어버려서 나는 울 수 밖에 없는것이였다. 그래도 기분 좋으면 만지게 해줌 자세히 보기 고양이 말랑 발바닥 고양이 발바닥 만지는건 참을 수가 없다. 이미 만져서 358번 물렸지만 그래도 똑같이 만질 것이다. 다들 고양이 젤리 만져봤나? 나는 만졌지롱 자세히 보기.. 2022. 8. 17.
카드 유형 03 Card type 03 피그마에서 디자인 하여, zeplin을 참고해 만든 카드 타입 사이트 입니다. 아래는 피그마를 이용해 먼저 디자인 하였습니다. 이후 코드로 작성하였습니다. HTML 사진에 있는 'click' 버튼과, 프로필 사진을 누르면 이동하는 링크를 걸었으며, 버튼에는 트렌스폼을 넣어 위치를 조정했습니다. 사진과 이름들은 flex를 넣었습니다. 바다의 세계 Click 이 바다처럼 우리 교실도 침수되고 있다 너무너무 웃겨 네네.. 우리 교실 물떨어져요 네.. 진짜 웃겨요 우리층 6층인데 빗물떨어져요 우산써야할지 모르겠어요 두명은 컴퓨터도 꺼졌대요~ 비오는 날에 이래도 되는거임? 컴퓨터 학원도?? Sunhye 6 Resources Click 노을진 바다가 이쁘면서 역시 바캉스는 집에서 쉬어야지 바.. 2022. 8. 10.
카드 유형 02 Card type 02 피그마에서 디자인 하여, zeplin을 참고해 만든 카드 타입 사이트 입니다. 아래는 피그마를 이용해 먼저 디자인 하였습니다. 이후 코드로 작성하였습니다. HTML 카드들은 컨테이너를 부여해 display : flex 를 주기 쉽게 하였습니다. 첫번째 방식과 비슷해 쉽게 작업할 수 있었습니다. 낮잠을 자야하는 이유 지금도 눈이 감긴다 감겨 비오는 날은 왜이리 심한지 아주 그냥 고양이 뱃살에 묻혀서 잠을 자고싶당 왜냐하면 걘 따뜻하고 에어컨은 시원하고 극락이에요 이불 쏘옥 고양이 이불에 파묻힌 고양이는 귀엽따 나는 조심스럽게 들어가지만 왜 이리 잘 도망가는 걸까나 ㅜㅜ.. 이불 쏘옥 고양이 이불에 파묻힌 고양이는 귀엽따 나는 조심스럽게 들어가지만 왜 이리 잘 도망가는 걸까나 ㅜㅜ.... 2022. 8. 9.
카드 타입 01 Card type 01 피그마에서 디자인 하여, zeplin을 참고해 만든 카드 타입 사이트 입니다. 아래는 피그마를 이용해 먼저 디자인 하였습니다. 이후 코드로 작성하였습니다. HTML 카드들은 컨테이너를 부여해 display : flex 를 주기 쉽게 하였습니다. 고양이는 왜이리 귀여운가? 아무래도 숨쉬는 것 자체가 귀엽기 때문이겠지요. 알겠습니까? 고양이님을 모시세요 찬양하세요 고양이가 가만히 있을 때 고양이가 가만히 있을 때 조차 너무 귀엽따아 뽀뽀 오백번 갈겨버려 또한 하품하는 거 보셨습니까? 강렬한 이빨 아주 깜찍하다. 혀에 가시가 돋았다는데 찔리고 싶다! 더 자세히 보기 고양이가 자고 있을 때 고양이가 자고있을 때 조차 너무 천사처럼 자고 있습니다 원래 천사인데 말이죠? 하아 안되겠다 걍 배.. 2022. 8. 9.
고양이 고양이
고양이 고양이
고양이 고양이

티스토리툴바